import { usePackageStore } from '@/stores/package';
import { onBeforeMount, ref } from 'vue';
import { storeToRefs } from 'pinia';
import { PackagesCategoryEnum, PackagesCategoryName } from '@/views/dataview/packages/enum';
import { renderIcon } from '@/utils';

const packagesListObj = {
    [PackagesCategoryEnum.CHARTS]: {
        icon: renderIcon("mdi:chart-line"),
        label: PackagesCategoryName.CHARTS
    },
    [PackagesCategoryEnum.VCHART]: {
        icon: renderIcon('mage:chart-15-fill'),
        label: PackagesCategoryName.VCHART
    },
    [PackagesCategoryEnum.INFORMATIONS]: {
        icon: renderIcon("material-symbols:info"),
        label: PackagesCategoryName.INFORMATIONS
    },
    [PackagesCategoryEnum.TABLES]: {
        icon: renderIcon("lsicon:list-filled"),
        label: PackagesCategoryName.TABLES
    },
    [PackagesCategoryEnum.DECORATES]: {
        icon:renderIcon("bxs:component"),
        label: PackagesCategoryName.DECORATES
    },
    [PackagesCategoryEnum.PHOTOS]: {
        icon: renderIcon("material-symbols:image"),
        label: PackagesCategoryName.PHOTOS
    },
    [PackagesCategoryEnum.ICONS]: {
        icon: renderIcon("uil:accessible-icon-alt"),
        label: PackagesCategoryName.ICONS
    }
}

export const useAsideMenu = () => {
    const packageStore = usePackageStore()
    const {packagesList} = storeToRefs(packageStore)
    const menuOpts = ref<any[]>([])

    // 将状态变量改为单独的ref
    const openKeysSub1 = ref<string[]>([])
    const selectedKeysSub1 = ref<string[]>([])
    const openKeysSub2 = ref<string[]>([])
    const selectedKeysSub2 = ref<string[]>([])
    const menuSub2 = ref<any[]>([])
    const imgListData = ref<any[]>([])

    const initSub1Menu = () => {
        selectedKeysSub1.value = [menuOpts.value[0].key]
        openKeysSub1.value = [menuOpts.value[0].key]
    }

    const handleSub1Click = (e: any) => {
        // 点击一级菜单初始化二级菜单
        const key = e.key
        selectedKeysSub1.value = [key]
        openKeysSub1.value = [key]
        initSub2Menu(key)
    }

    const handleSub2Click = (e: any) => {
        // 点击二级菜单展示右侧图片列表
        const sub2key = e.key
        openKeysSub2.value = [sub2key]
        selectedKeysSub2.value = [sub2key]
        // 根据当前一级菜单key获取菜单数组
        let sub1Map = menuOpts.value.find((item:any)=>item.key == selectedKeysSub1.value[0])
        let menuSub2Opts = sub1Map.list || []
        // 根据当前点击的分类获取当前分类下的数组展示
        imgListData.value = menuSub2Opts.filter((item:any)=>item.category == sub2key)
    }
    const initSub2Keys = () => {
        if(menuSub2.value.length < 1) return
        openKeysSub2.value = [menuSub2.value[0].key]
        selectedKeysSub2.value = [menuSub2.value[0].key]
    }

    const initSub2Menu = (val?: string) => {
        const sub1Key = val || selectedKeysSub1.value[0]
        const list = menuOpts.value.find((i: any) => i.key == sub1Key)?.list || []
        const arr: any[] = []
        list.forEach((i: any) => {
            if (arr.findIndex((i2: any) => i2.key == i.category) == -1) {
                // 无的情况初始化
                arr.push({
                    key: i.category,
                    label: i.categoryName,
                    title: i.categoryName,
                    list:[i]
                })
            }else {
                arr.find((i2: any) => i2.key == i.category).list.push(i)
            }
        })
        menuSub2.value = arr
        // 初始化key
        initSub2Keys()
        // 初始化图表img列表
        handleSub2Click({key:selectedKeysSub2.value[0]})
    }

    // 初始化一级菜单目录结构 即dataTest
    const initMenuOpts = ()=>{
        for(let val in packagesList.value){
            menuOpts.value.push({
                key:val,
                // @ts-ignore
                icon:packagesListObj[val].icon,
                // @ts-ignore
                label:packagesListObj[val].label,
                // @ts-ignore
                list:packagesList.value[val]
            })
        }
    }

    onBeforeMount(()=>{
        initMenuOpts()
    })

    return {
        openKeysSub1,
        selectedKeysSub1,
        menuSub2,
        openKeysSub2,
        selectedKeysSub2,
        menuOpts,
        imgListData,
        handleSub1Click,
        initSub1Menu,
        initSub2Menu,
        handleSub2Click
    }
}